<!-- HTML header for doxygen 1.8.6-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<title>OpenCV: OpenCV iOS - Image Processing</title>
<link href="../../opencv.ico" rel="shortcut icon" type="image/x-icon" />
<link href="../../tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../jquery.js"></script>
<script type="text/javascript" src="../../dynsections.js"></script>
<script type="text/javascript" src="../../tutorial-utils.js"></script>
<link href="../../search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../search/searchdata.js"></script>
<script type="text/javascript" src="../../search/search.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
    jax: ["input/TeX","output/HTML-CSS"],
});
//<![CDATA[
MathJax.Hub.Config(
{
  TeX: {
      Macros: {
          matTT: [ "\\[ \\left|\\begin{array}{ccc} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{array}\\right| \\]", 9],
          fork: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ \\end{array} \\right.", 4],
          forkthree: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ \\end{array} \\right.", 6],
          forkfour: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ #7 & \\mbox{#8}\\\\ \\end{array} \\right.", 8],
          vecthree: ["\\begin{bmatrix} #1\\\\ #2\\\\ #3 \\end{bmatrix}", 3],
          vecthreethree: ["\\begin{bmatrix} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{bmatrix}", 9],
          cameramatrix: ["#1 = \\begin{bmatrix} f_x & 0 & c_x\\\\ 0 & f_y & c_y\\\\ 0 & 0 & 1 \\end{bmatrix}", 1],
          distcoeffs: ["(k_1, k_2, p_1, p_2[, k_3[, k_4, k_5, k_6 [, s_1, s_2, s_3, s_4[, \\tau_x, \\tau_y]]]]) \\text{ of 4, 5, 8, 12 or 14 elements}"],
          distcoeffsfisheye: ["(k_1, k_2, k_3, k_4)"],
          hdotsfor: ["\\dots", 1],
          mathbbm: ["\\mathbb{#1}", 1],
          bordermatrix: ["\\matrix{#1}", 1]
      }
  }
}
);
//]]>
</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
<link href="../../doxygen.css" rel="stylesheet" type="text/css" />
<link href="../../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<!--#include virtual="/google-search.html"-->
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="../../opencv-logo-small.png"/></td>
  <td style="padding-left: 0.5em;">
   <div id="projectname">OpenCV
   &#160;<span id="projectnumber">4.5.2</span>
   </div>
   <div id="projectbrief">Open Source Computer Vision</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "../../search",false,'Search');
</script>
<script type="text/javascript" src="../../menudata.js"></script>
<script type="text/javascript" src="../../menu.js"></script>
<script type="text/javascript">
$(function() {
  initMenu('../../',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div id="nav-path" class="navpath">
  <ul>
<li class="navelem"><a class="el" href="../../d9/df8/tutorial_root.html">OpenCV Tutorials</a></li><li class="navelem"><a class="el" href="../../d3/dc9/tutorial_table_of_content_ios.html">OpenCV iOS</a></li>  </ul>
</div>
</div><!-- top -->
<div class="header">
  <div class="headertitle">
<div class="title">OpenCV iOS - Image Processing </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p><b>Prev Tutorial:</b> <a class="el" href="../../d7/d88/tutorial_hello.html">OpenCV iOS Hello</a></p>
<p><b>Next Tutorial:</b> <a class="el" href="../../db/dc8/tutorial_video_processing.html">OpenCV iOS - Video Processing</a></p>
<table class="doxtable">
<tr>
<th align="right"></th><th align="left"></th></tr>
<tr>
<td align="right">Original author </td><td align="left">Charu Hans </td></tr>
<tr>
<td align="right">Compatibility </td><td align="left">OpenCV &gt;= 3.0 </td></tr>
</table>
<h2>Goal </h2>
<p>In this tutorial we will learn how to do basic image processing using OpenCV in iOS.</p>
<h2>Introduction </h2>
<p>In <em>OpenCV</em> all the image processing operations are usually carried out on the <em>Mat</em> structure. In iOS however, to render an image on screen it have to be an instance of the <em>UIImage</em> class. To convert an <em>OpenCV Mat</em> to an <em>UIImage</em> we use the <em>Core Graphics</em> framework available in iOS. Below is the code needed to covert back and forth between Mat's and UIImage's. </p><div class="fragment"><div class="line">- (<a class="code" href="../../d2/d75/namespacecv.html">cv</a>::Mat)cvMatFromUIImage:(UIImage *)image</div><div class="line">{</div><div class="line">  CGColorSpaceRef colorSpace = CGImageGetColorSpace(image.CGImage);</div><div class="line">  CGFloat cols = image.size.width;</div><div class="line">  CGFloat rows = image.size.height;</div><div class="line"></div><div class="line">  <a class="code" href="../../d3/d63/classcv_1_1Mat.html">cv::Mat</a> cvMat(rows, cols, <a class="code" href="../../d1/d1b/group__core__hal__interface.html#ga4519ad2827f771db8260c61207b782df">CV_8UC4</a>); <span class="comment">// 8 bits per component, 4 channels (color channels + alpha)</span></div><div class="line"></div><div class="line">  CGContextRef contextRef = CGBitmapContextCreate(cvMat.data,                 <span class="comment">// Pointer to  data</span></div><div class="line">                                                 cols,                       <span class="comment">// Width of bitmap</span></div><div class="line">                                                 rows,                       <span class="comment">// Height of bitmap</span></div><div class="line">                                                 8,                          <span class="comment">// Bits per component</span></div><div class="line">                                                 cvMat.step[0],              <span class="comment">// Bytes per row</span></div><div class="line">                                                 colorSpace,                 <span class="comment">// Colorspace</span></div><div class="line">                                                 kCGImageAlphaNoneSkipLast |</div><div class="line">                                                 kCGBitmapByteOrderDefault); <span class="comment">// Bitmap info flags</span></div><div class="line"></div><div class="line">  CGContextDrawImage(contextRef, CGRectMake(0, 0, cols, rows), image.CGImage);</div><div class="line">  CGContextRelease(contextRef);</div><div class="line"></div><div class="line">  <span class="keywordflow">return</span> cvMat;</div><div class="line">}</div></div><!-- fragment --> <div class="fragment"><div class="line">- (<a class="code" href="../../d2/d75/namespacecv.html">cv</a>::Mat)cvMatGrayFromUIImage:(UIImage *)image</div><div class="line">{</div><div class="line">  CGColorSpaceRef colorSpace = CGImageGetColorSpace(image.CGImage);</div><div class="line">  CGFloat cols = image.size.width;</div><div class="line">  CGFloat rows = image.size.height;</div><div class="line"></div><div class="line">  <a class="code" href="../../d3/d63/classcv_1_1Mat.html">cv::Mat</a> cvMat(rows, cols, <a class="code" href="../../d1/d1b/group__core__hal__interface.html#ga81df635441b21f532fdace401e04f588">CV_8UC1</a>); <span class="comment">// 8 bits per component, 1 channels</span></div><div class="line"></div><div class="line">  CGContextRef contextRef = CGBitmapContextCreate(cvMat.data,                 <span class="comment">// Pointer to data</span></div><div class="line">                                                 cols,                       <span class="comment">// Width of bitmap</span></div><div class="line">                                                 rows,                       <span class="comment">// Height of bitmap</span></div><div class="line">                                                 8,                          <span class="comment">// Bits per component</span></div><div class="line">                                                 cvMat.step[0],              <span class="comment">// Bytes per row</span></div><div class="line">                                                 colorSpace,                 <span class="comment">// Colorspace</span></div><div class="line">                                                 kCGImageAlphaNoneSkipLast |</div><div class="line">                                                 kCGBitmapByteOrderDefault); <span class="comment">// Bitmap info flags</span></div><div class="line"></div><div class="line">  CGContextDrawImage(contextRef, CGRectMake(0, 0, cols, rows), image.CGImage);</div><div class="line">  CGContextRelease(contextRef);</div><div class="line"></div><div class="line">  <span class="keywordflow">return</span> cvMat;</div><div class="line"> }</div></div><!-- fragment --><p> After the processing we need to convert it back to UIImage. The code below can handle both gray-scale and color image conversions (determined by the number of channels in the <em>if</em> statement). </p><div class="fragment"><div class="line"><a class="code" href="../../d3/d63/classcv_1_1Mat.html">cv::Mat</a> greyMat;</div><div class="line"><a class="code" href="../../d8/d01/group__imgproc__color__conversions.html#ga397ae87e1288a81d2363b61574eb8cab">cv::cvtColor</a>(inputMat, greyMat, <a class="code" href="../../d8/d01/group__imgproc__color__conversions.html#gga4e0972be5de079fed4e3a10e24ef5ef0a353a4b8db9040165db4dacb5bcefb6ea">COLOR_BGR2GRAY</a>);</div></div><!-- fragment --><p> After the processing we need to convert it back to UIImage. </p><div class="fragment"><div class="line">-(UIImage *)UIImageFromCVMat:(<a class="code" href="../../d2/d75/namespacecv.html">cv</a>::Mat)cvMat</div><div class="line">{</div><div class="line">  NSData *data = [NSData dataWithBytes:cvMat.data length:cvMat.elemSize()*cvMat.total()];</div><div class="line">  CGColorSpaceRef colorSpace;</div><div class="line"></div><div class="line">  <span class="keywordflow">if</span> (cvMat.elemSize() == 1) {</div><div class="line">      colorSpace = CGColorSpaceCreateDeviceGray();</div><div class="line">  } <span class="keywordflow">else</span> {</div><div class="line">      colorSpace = CGColorSpaceCreateDeviceRGB();</div><div class="line">  }</div><div class="line"></div><div class="line">  CGDataProviderRef provider = CGDataProviderCreateWithCFData((__bridge CFDataRef)data);</div><div class="line"></div><div class="line">  <span class="comment">// Creating CGImage from cv::Mat</span></div><div class="line">  CGImageRef imageRef = CGImageCreate(cvMat.cols,                                 <span class="comment">//width</span></div><div class="line">                                     cvMat.rows,                                 <span class="comment">//height</span></div><div class="line">                                     8,                                          <span class="comment">//bits per component</span></div><div class="line">                                     8 * cvMat.elemSize(),                       <span class="comment">//bits per pixel</span></div><div class="line">                                     cvMat.step[0],                            <span class="comment">//bytesPerRow</span></div><div class="line">                                     colorSpace,                                 <span class="comment">//colorspace</span></div><div class="line">                                     kCGImageAlphaNone|kCGBitmapByteOrderDefault,<span class="comment">// bitmap info</span></div><div class="line">                                     provider,                                   <span class="comment">//CGDataProviderRef</span></div><div class="line">                                     NULL,                                       <span class="comment">//decode</span></div><div class="line">                                     <span class="keyword">false</span>,                                      <span class="comment">//should interpolate</span></div><div class="line">                                     kCGRenderingIntentDefault                   <span class="comment">//intent</span></div><div class="line">                                     );</div><div class="line"></div><div class="line"></div><div class="line">  <span class="comment">// Getting UIImage from CGImage</span></div><div class="line">  UIImage *finalImage = [UIImage imageWithCGImage:imageRef];</div><div class="line">  CGImageRelease(imageRef);</div><div class="line">  CGDataProviderRelease(provider);</div><div class="line">  CGColorSpaceRelease(colorSpace);</div><div class="line"></div><div class="line">  <span class="keywordflow">return</span> finalImage;</div><div class="line"> }</div></div><!-- fragment --><h2>Output </h2>
<div class="image">
<img src="../../output.jpg" alt="output.jpg"/>
</div>
<p>Check out an instance of running code with more Image Effects on <a href="http://www.youtube.com/watch?v=Ko3K_xdhJ1I">YouTube</a> .</p>
<div align='center'><iframe title='Video' width='560' height='349' src='https://www.youtube.com/embed/Ko3K_xdhJ1I?rel=0' frameborder='0' align='middle' allowfullscreen></iframe></div> </div></div><!-- contents -->
<!-- HTML footer for doxygen 1.8.6-->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Fri Apr 2 2021 11:36:37 for OpenCV by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="../../doxygen.png" alt="doxygen"/>
</a> 1.8.13
</small></address>
<script type="text/javascript">
//<![CDATA[
addTutorialsButtons();
//]]>
</script>
</body>
</html>
